// Copyright 2020 The casbin Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import React from "react";
import * as PlaneBackend from "../backend/PlaneBackend";
import * as NodeBackend from "../backend/NodeBackend";
import * as Setting from "../Setting";
import i18next from "i18next";

class PlaneBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      classes: props,
      planes: [],
      nodesNum: 0
    };
  }

  componentDidMount() {
    this.getPlaneList();
    this.getNodesNum();
  }

  getPlaneList() {
    PlaneBackend.getPlaneList()
      .then((res) => {
        this.setState({
          planes: res?.data,
        });
      });
  }

  getNodesNum() {
    NodeBackend.getNodesNum()
      .then((res) => {
        this.setState({
          nodesNum: res?.data,
        });
      });
  }

  renderNode(node) {
    return (
      <a href={`/go/${node?.id}`} className="item_node">{node?.name}</a>
    )
  }

  renderPlane(plane) {
    return (
      <span>
        <div className="sep20"></div>
        <div className="box">
          <div className="header" style={{backgroundColor: plane?.backgroundColor, color: plane?.color}}>
            <img src={plane?.image} border="0" align="absmiddle" width="24"/>{" "}&nbsp;{" "}{plane?.name}
            <span className="fr" style={{color: plane?.color, lineHeight: "20px"}}>{plane?.id}{" "}•{" "}<span className="small">{plane?.nodes.length}{" "}nodes</span>
            </span>
          </div>
          <div className="inner">
            {
              plane?.nodes.map((node) => {
                return this.renderNode(node)
              })
            }
          </div>
        </div>
      </span>
    )
  }

  render() {
    return (
      <span>
        <div className="box">
          <div className="cell" style={{padding: "0px"}}>
            <table cellPadding="10" cellSpacing="0" border="0" width="100%">
              <tr>
                <td width="64">
                  <img src={Setting.getStatic("/static/img/network.png")} width="64" alt="Nodes"/>
                </td>
                <td>
                  <span className="item_title">{Setting.getForumName()}{" "}{i18next.t("plane:Plane list")}</span>
                  <div className="sep5"></div>
                  <span className="fade">{this.state.nodesNum} nodes now and growing.</span>
                </td>
              </tr>
            </table>
          </div>
        </div>
        {
          this.state.planes?.map((plane) => {
            return this.renderPlane(plane)
          })
        }
      </span>
    )
  }
}

export default PlaneBox;
